<template>
    <div>
        <!-- 404 -->
        <div class="not" v-if="flag">
            <img :src="'./static/images/404.png'">
            <h3>登录后查看外卖订单</h3>
            <el-button type="success" class="btn" @click="tolog">立即登录</el-button>
        </div>
        <!-- bingo -->
        <ul class="mui-table-view bingo" v-if="!flag">
            <li class="mui-table-view-cell mui-media" v-for="item in order" :key="item.id">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left foodsImg" :src="item.img">
                    <div class="mui-media-body">
                        <p class="title">{{item.restaurant}}<span class="static" :style="{'color': item.static == 1 ? '#67C23A' : '#E6A23C'}">{{item.static == 1 ? '订单已送达' : '订单未送达'}}</span></p>
                        <div class="time">{{item.time}}</div>
                        <p class='mui-ellipsis'>{{item.foods}}等{{item.amount}}件商品
                            <span class="price">¥{{item.price}}</span>
                        </p>
                        <el-button type="primary" plain @click="again">再来一单</el-button>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            flag: true,
            order: [{
                id: 1,
                img: './static/images/foods1.jpg',
                restaurant: '蒸滋味中式快餐(奥园店)',
                static: 1,
                time: '2019-02-09 17:32',
                foods: '木桶饭',
                amount: '2',
                price: '26.10'
            }]
        }
    },
    methods: {
        // 跳转路由
        tolog() {
            this.$router.push({path: '/login'})
        },
        // 再来一单
        again() {
            this.$router.push({path: '/shop/2'})
        }
    },
    created() {
        if (this.$store.state.status == 1) this.flag = false;
        if (this.$store.state.orderInfo) {
            this.order.unshift(this.$store.state.orderInfo)
        }
    },
}
</script>


<style scoped>
    .not {
        margin-top: 100px;
    }
    /* bingo */
    .foodsImg {
        width: 31px;
        height: 31px;
    }
    .title {
        font-size: 16px;
        color: #333;
    }
    .time {
        margin: -3px 0 5px;
        font-size: 11px;
        color: #999;
    }
    .static {
        float: right;
        font-size: 13px;
        color: #333;
    }
    .mui-ellipsis {
        padding: 15px 0;
        border-top: 1px solid #f4f4f4;
        border-bottom: 1px solid #f4f4f4;
        font-size: 13px;
        color: #666;
    }
    .price {
        float: right;
        font-weight: 700;
        color: #F56C6C;
    }
    .el-button--primary.is-plain {
        float: right;
        margin-top: 10px;
        padding: 5px 10px;
        width: 73px;
        height: 28px;
        font-size: 13px;
        background: #fff;
    }
</style>
